<template>
  <view v-if="position" class="p-h24 p-v30">
    <view class="p-h20 p-v30 bg-1 r-20">
      <view class="flex">
        <text class="flex-1 text-700-136 truncate">{{ position.title }}</text>
        <text class="m-l16 text-700-528">{{ position.money_range }}</text>
      </view>
      <view class="flex flex-wrap m-t24">
        <view class="flex m-r40">
          <image class="location-icon m-r10" src="@/static/images/office/location.png" mode="aspectFit" />
          <text class="text-400-328">{{ position.city }} · {{ position.area }}</text>
        </view>
        <text class="text-400-328">{{ position.lowest_education }} | {{ getWorkTimesLabel(position.work_year) }}</text>
      </view>
    </view>
    <view class="m-t40 p-l28 title-row">
      <text class="text-700-130">职位描述</text>
    </view>
    <ExpansionPanel ref="expansionPanelRef">
      <view class="p-a20">
        <text class="text-400-128">{{ position.content }}</text>
      </view>
      <!--
        <view class="p-a20 hairline-bottom">
        <view class="text-700-128">岗位职责</view>
        <view class="m-t20 text-400-128">
        1、兑换好当天所需要零钱，备用金必须天天核对，不得以白条抵现;
        2、下班必须按企业规定逐项交接清楚，交接要及时、准确，对于单顾客结算时，必须由当事人签字;
        3、做好当天交接工作，认真清点备用;
        4、准确打印账单，及时快捷收妥客户应付费用，收取现金要通过验钞机检验真伪，杜绝收取假币。如出现假币，由当班收银员负责。
        </view>
        </view>
        <view class="p-a20">
        <view class="text-700-128">任职条件：</view>
        <view class="m-t20 text-400-128">
        1、限女生，年龄18-28岁;形象气质优；
        2、品行端正，能吃苦耐劳，有收银员经验者优先录取；
        3、有收银经验，能准确无误的收银找零，会简单的电脑操作。
        </view>
        </view>
      -->
    </ExpansionPanel>
    <view v-if="fringeList.length > 0" class="m-t20 bg-1 r-20 p-h20 p-t20">
      <view class="m-b20">
        <text class="text-700-128">福利待遇：</text>
      </view>
      <view class="flex flex-wrap">
        <view v-for="(f, i) in fringeList" :key="i" class="p-h16 p-v8 m-b20 m-r20 r-6 tag">
          <text class="text-400-526">{{ f }}</text>
        </view>
      </view>
    </view>
    <view class="m-t20 bg-1 r-20 p-a20">
      <view class="m-b20">
        <text class="text-700-128">工作地点：</text>
      </view>
      <view class="flex">
        <text class="flex-1 truncate text-400-328">{{ position.city }}·{{ position.area }}·{{ position.address }}</text>
        <image class="m-l16 arrow-r" src="@/static/images/office/chevron-right.png" mode="aspectFit" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ExpansionPanel from './components/expansion-panel.vue'
import type { TFirmPosition } from '@/types/api.d'
import { useCommonStore } from '@/stores/user'
const { getWorkTimesLabel } = useCommonStore()
let id = ''

const expansionPanelRef = ref()
const position = ref<TFirmPosition | null>(null)

const fringeList = computed(() => {
  if (position.value) {
    return position.value.fringe.split(',').filter((v) => v.trim() !== '')
  }

  return []
})

const getInfo = () => {
  uni.showLoading({ mask: true })

  uni.$u.get<TFirmPosition>('/position/info', { id }).then((res) => {
    if (res.code === 1) {
      position.value = res.data

      nextTick(() => {
        // expansionPanelRef.value?.refresh()
      })
    }
  }).finally(() => {
    uni.hideLoading()
  })
}

onLoad((e) => {
  id = e?.id ?? ''

  getInfo()
})
</script>

<style lang="scss">
page {
  background-color: $page-color-4;
}
</style>

<style lang="scss" scoped>
.location-icon {
  width: 30rpx;
  height: 30rpx;
}

.title-row {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 7rpx;
    height: 26rpx;
    background-color: $bg-color-2;
    transform: translateY(-50%);
  }
}

.tag {
  background-color: $bg-color-5;
}

.arrow-r {
  width: 22rpx;
  height: 22rpx;
}
</style>
